site_8g/src/app/[locale]/(TabBar)/profile/page.scss

.profile-box {
    //width: 100%;
    //height: 100%;
    //overflow-y: auto;
    //padding-bottom: .4rem;
    //background-color: #1f1f1f;
    //display: flex;
    //flex-direction: column;

    .userContent {
        // background: -webkit-gradient(linear, left top, left bottom, from(#ffaa30), to(#ffe6be));
        // background: -webkit-linear-gradient(top, #ffaa30, #ffe6be);
        // background: -o-linear-gradient(top, #ffaa30 0, #ffe6be 100%);
        // background: linear-gradient(180deg, #ffaa30, #ffe6be);
        height: auto;
        // border: 1px solid #d917ff;
        // border-radius: 15px;
        // box-shadow: 0 -5px 25px #d917ff inset;
        margin-top: 0.06rem;
        color: #fff;
    }

    .userInfo {
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        // height: 0.56rem;
        padding: 0.11rem 0.18rem;
        box-sizing: border-box;
        //margin-bottom: .23rem;
        position: relative;
        // &::after {
        //     content: "";
        //     position: absolute;
        //     bottom: 0;
        //     width: 90%;
        //     border-bottom: 0.01rem dotted #d9a801;
        // }

        &.active {
            margin-bottom: 0;
        }

        & > div {
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            // height: 0.36rem;
            font-size: 0.14rem;

            .bgImg {
                width: 0.5rem;
                height: 0.5rem;
                margin-right: 0.1rem;
                //background-color: #ff9323;
                border-radius: 50%;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;

                &.default {
                    background-size: 80% 80%;
                }
            }

            & > div {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                // height: 0.36rem;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
            }
            .phone {
                font-size: 0.12rem;
            }
        }

        .goto {
            display: flex;
            align-items: center;
            cursor: pointer;
            // color: #1f1f1f;
        }

        .iconfont {
            font-size: 0.16rem;
            font-weight: 700;
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            margin-left: 0.04rem;
        }
    }

    .vip-card {
        margin: 0.1rem 0.1rem 0;
        display: flex;
        align-items: center;

        &__icon {
            margin-right: 0.0694rem;
            position: relative;
            .icon-level {
                position: absolute;
                bottom: 30%;
                width: 100%;
                text-align: center;
                font-size: 0.16rem;
                font-weight: 700;
            }
        }
        &-process {
            flex: 1;
            font-size: 0.11rem;
            position: relative;
            display: flex;
            align-items: center;
            padding-bottom: 0.15rem;
            .process-top {
                color: #fb8b05;
                margin-bottom: 3px;
            }
            .vip-card-text {
                // position: absolute;
                // right: 0;
                // top: -0.4rem;
                color: #11e169;
                font-size: 0.14rem;
                display: flex;
                align-items: center;
            }
            .process-bottom {
                display: flex;
                align-items: center;
                text-align: center;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                transform: translateY(-25%);
                // color: #666;
                &-desc {
                    flex: 1;
                    color: #fff;
                }
                span {
                    // background: #0abd71;
                    color: #121418;
                    display: block;
                    padding: 0.02rem 0.06rem;
                    border-radius: 0.1rem;
                    font-size: 0.12rem;
                }
            }
        }
    }

    .coin {
        display: flex;
        //justify-content: space-between;
        padding: 0.15rem 0.1rem 0.4rem 0.1rem;
        margin: 0 0.1rem;
        background-color: #1f2830;
        border-radius: 0.1rem;
        &_left__icon {
            margin: 0 0.08rem;
            color: #789098;
            font-size: 0.2rem;
        }
        .coin_right_wallet {
            display: grid;
            flex: 1;
            font-size: 0.12rem;
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: 0.8rem;
            grid-row-gap: 0.15rem;
            .wallet_header {
                display: flex;
                align-items: center;

                &__icon {
                    width: 0.14rem;
                    height: 0.14rem;
                    margin-left: 0.03rem;
                }
            }
            .num {
                width: 100%;
                height: auto;
                display: flex;
                span {
                    // font-size: 0.14rem;
                    &:first-child {
                        margin-right: 0.04rem;
                    }
                }
            }

            .wallet_left_border {
                border-right: 0.01rem dotted #d9a801;
                display: flex;
                align-items: center;
            }
            .wallet_right_content {
                // margin-left: 0.3rem;
                display: flex;
                align-items: center;
                font-size: 0.12rem;
            }
        }

        //& > div {
        //  display: flex;
        //  -webkit-box-align: center;
        //  -ms-flex-align: center;
        //  align-items: center;
        //  width: 50%;
        //  -webkit-box-sizing: border-box;
        //  box-sizing: border-box;
        //
        //  &:first-child {
        //    border-right: .01rem dotted #d9a801;
        //  }
        //

        //
        //  & > div {
        //    flex: 1;
        //    display: flex;
        //    flex-direction: column;
        //  }
        //
        //  div {
        //    span {
        //      font-size: .12rem;
        //      color: #333;
        //      display: flex;
        //      align-items: center;
        //
        //      .a {
        //        width: .14rem;
        //        margin-left: .03rem;
        //      }
        //    }

        //  }
        //}
    }
    .link {
        width: 100%;
        height: auto;
        margin-top: -0.22rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn {
            width: 1.53rem;
            height: 0.44rem;
            line-height: 0.44rem;
            // background: -o-linear-gradient(top, #532f9e, #6549d3);
            // background: linear-gradient(to bottom, #5633a2, #6549d3);
            color: #fff;
            font-size: 0.14rem;
            margin: 0 0.08rem;
            text-align: center;
            border-radius: 0.44rem;
            position: relative;
            span {
                position: relative;
                z-index: 1;
                font-size: 0.16rem;
                font-weight: 700;
            }
            i {
                font-size: 0.2rem;
            }
            &:nth-child(1) {
                background-color: #0abd71;
            }
            &:nth-child(2) {
                background-color: #dba40b;
            }
            // &:before {
            //     content: "";
            //     position: absolute;
            //     left: 0;
            //     top: 0;
            //     bottom: 0;
            //     right: 0;
            //     border-radius: 0.44rem;

            //     z-index: 1;
            // }
            // &:after {
            //     content: "";
            //     position: absolute;
            //     left: -1px;
            //     top: 2px;
            //     bottom: -1px;
            //     right: -1px;
            //     border-radius: 0.44rem;

            //     z-index: 0;
            // }
            // &:nth-child(1) {
            //     &:before {
            //         background: linear-gradient(to bottom, #bb35df, #6549d3);
            //     }
            //     &:after {
            //         background-color: #bb35df;
            //     }
            // }
            // &:nth-child(2) {
            //     &:before {
            //         background: linear-gradient(to bottom, #bb35df, #6549d3);
            //         box-shadow: 0 -3px 25px #5261d4 inset;
            //     }
            //     &:after {
            //         background-color: #46e3ff;
            //     }
            // }
        }
    }

    .carteira-box {
        display: block;
        width: 2.2rem;
        height: 0.3rem;
        line-height: 0.3rem;
        border-radius: 0.04rem;
        color: #fff;
        font-size: 0.13rem;
        margin: 0 auto;
        margin-top: 0.1rem;
        text-align: center;
        background: #ccc;

        &.active {
            background: -o-linear-gradient(top, #ff9323, #ff6a01);
            background: linear-gradient(180deg, #ff9323, #ff6a01);
        }
    }
}
.wallet-question {
    width: 0.14rem;
    height: 0.14rem;
    border-radius: 50%;
    text-align: center;
    line-height: 0.14rem;
    font-size: 0.12rem;
    margin-left: 0.04rem;
    background-color: #ffb400;
}
.wallet-right-icon {
    // background-image: url("/prefile/circle.png");
    // // width: 0.3rem;
    // // height: 0.3rem;
    // background-size: 100% 100%;
    text-align: center;
    // line-height: 0.24rem;
    margin-right: 0.04rem;
}